<template>
  <div class="search_container">
    <div class="search_header">
      <div class="search_bar" to="/search">
        <div class="img_wrap">
          <img src="/qxqstatic/sousuo.png" />
        </div>
        <input
          class="input"
          v-model="keyword"
          @input="searchByKeyWord"
          @submit.native.prevent
          @keyup.enter="navToResult(keyword)"
        />
        <div class="delete" @click="clearKeyWord">
          <img src="/qxqstatic/cuowu.png" />
        </div>
      </div>
      <button class="cancel" @click="cancel">取消</button>
    </div>
    <div class="search_info">
      <div class="history_list" v-if="historyList.length">
        <div class="title">
          <span>搜索历史</span>
          <div class="delete" @click="clearHistory">
            <img src="/qxqstatic/delete.png" />
          </div>
        </div>
        <div
          class="history_item"
          v-for="history in historyList"
          @click="clickHotWord(history)"
        >
          {{ history }}
        </div>
      </div>
      <div
        class="search_queryresult"
        v-if="queryResultList.length || albumResultList.length"
      >
        <div
          class="album_item"
          v-for="album in albumResultList"
          @click="navToAlbum(album.url, album.keyword)"
        >
          <img :src="album.imgPath" class="pic" />
          <div class="album_info">
            <div class="album_title" v-html="album.highlightKeyword"></div>
            <div class="ablum_tag_list">
              <div class="album_tag">{{ album.category }}</div>
              <div class="album_tag">
                <img src="/qxqstatic/erji.png" />{{
                  turnString(String(album.play))
                }}
              </div>
              <div class="album_tag">
                <img src="/qxqstatic/yinpin.png" />{{ album.tracks }}集
              </div>
            </div>
            <div class="bofang">
              <img src="/qxqstatic/bofang.png" />
            </div>
          </div>
        </div>
        <div
          class="query_item"
          v-for="query in queryResultList"
          v-html="query.highlightKeyword"
          @click="clickHotWord(query.keyword)"
        ></div>
      </div>
      <div class="search_hotword" v-else>
        <van-tabs
          v-model:active="active"
          color="#f06742"
          line-width="16"
          class="menu_tabs"
          @change="onChangeTab"
        >
          <van-tab
            v-for="category in hotwordCategory"
            :title="category.categoryName"
          >
            <div class="hotword_list">
              <div
                class="hotword_item"
                v-for="(hotword, index) in hotwordList"
                @click="clickHotWord(hotword.word)"
              >
                <div class="num">{{ index + 1 }}</div>
                <div class="info">{{ hotword.word }}</div>
                <img
                  class="arrow"
                  src="/qxqstatic/shangjiantou.png"
                  v-if="hotword.shift === 1"
                />
                <img class="arrow" src="/qxqstatic/xiajiantou.png" v-else />
              </div>
            </div>
          </van-tab>
        </van-tabs>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';

export default defineComponent({
  name: 'index',
});
</script>

<script setup lang="ts">
import {
  reqHotWordCategory,
  reqHotWordList,
  reqSearchByKeyWord,
} from '@/api/search';

const router = useRouter();
const active = ref<any>({});
const categoryId = ref('');
const keyword = ref('');
const hotwordCategory = ref<any>([]);
const hotwordList = ref<any>([]);
const queryResultList = ref<any>([]);
const albumResultList = ref<any>([]);
const historyList = ref<any>([]);

onMounted(() => {
  getHotWordCategory();
  historyList.value = JSON.parse(localStorage.getItem('history')!) || [];
});

const getHotWordCategory = async () => {
  const res = await reqHotWordCategory();
  hotwordCategory.value = res.category;
};

const onChangeTab = () => {
  categoryId.value = hotwordCategory.value[active.value].categoryId;
  getHotWordList();
};

const getHotWordList = async () => {
  const res = await reqHotWordList(categoryId.value);
  hotwordList.value = res.hotWordResultList;
};

const searchByKeyWord = async () => {
  const res = await reqSearchByKeyWord(keyword.value);
  if (queryResultList.value.length === 0) {
    queryResultList.value = res.data.result.queryResultList;
  }
  if (albumResultList.value.length === 0) {
    albumResultList.value = res.data.result.albumResultList;
  }
};

const clearHistory = () => {
  localStorage.setItem('history', JSON.stringify([]));
  historyList.value = [];
};

const clickHotWord = (word: string) => {
  keyword.value = word;
  navToResult(keyword.value);
};

const navToAlbum = (url: string, keyword: string) => {
  router.push(url, () => {});
  addHistory(keyword);
};

const navToResult = (str: string) => {
  //判断是否有token
  const token = localStorage.getItem('token');
  console.log(token, 'token');

  // if(localStorage.getItem('token')){

  // }
  router.push({
    path: '/result',
    query: {
      kw: str,
    },
  });
  addHistory(str);
};

const addHistory = (str: string) => {
  if (historyList.value.includes(str)) return;
  historyList.value.push(str);
  localStorage.setItem('history', JSON.stringify(historyList.value));
};

const clearKeyWord = () => {
  keyword.value = '';
  queryResultList.value = [];
  albumResultList.value = [];
};

const cancel = () => {
  router.go(-1);
};

const turnString = (str: string) => {
  if (str.length <= 4) {
    return str;
  } else if (str.length > 4 && str.length <= 8) {
    const _str = str.substring(0, str.length - 4);
    const str_ = str.substring(str.length - 4, str.length - 2);
    return _str + '.' + str_ + '万';
  } else if (str.length > 8) {
    const _str = str.substring(0, str.length - 8);
    const str_ = str.substring(str.length - 8, str.length - 6);
    return _str + '.' + str_ + '亿';
  }
};
</script>

<style scoped>
.search_container {
  height: 100%;
  padding: 0px 14px;
  margin: 0px;
  background-color: #fff;
}
.search_header {
  width: 100%;
  height: 30px;
  display: flex;
  align-items: center;
  margin: 8px 0;
}
.search_info {
  width: 100%;
  position: relative;
}
.search_info .history_list {
  width: 100%;
  background-color: #fff;
  overflow: hidden;
}
.history_list .title {
  height: 30px;
  line-height: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}
.history_list .delete img {
  width: 18px;
  height: 18px;
  margin-right: 5px;
}
.history_list .history_item {
  height: 40px;
  line-height: 30px;
  font-size: 14px;
  color: #333;
  display: inline-block;
  padding: 5px 15px;
  margin: 5px 10px 10px 0px;
  background-color: #f3f4f5;
  max-width: 100%;
  white-space: nowrap;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search_info .search_queryresult {
  width: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  background: #fff;
  z-index: 10;
}
.search_queryresult .album_item {
  width: 100%;
  height: 40px;
  padding: 15px 0;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.album_info {
  position: relative;
}
.album_info .album_title {
  width: 280px;
  height: 20px;
  margin-left: 10px;
  line-height: 20px;
  font-size: 14px;
  color: #333;
  overflow: hidden;
  white-space: nowrap;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}
.album_info .bofang {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 10px;
  right: -12px;
}
.bofang img {
  display: block;
  width: 20px;
  height: 20px;
}
.album_info .ablum_tag_list {
  height: 20px;
  display: flex;
  align-items: center;
  position: relative;
}
.ablum_tag_list .album_tag {
  color: #a3a3ac;
  font-size: 12px;
  margin-right: 20px;
  display: flex;
}
.album_tag img {
  display: block;
  width: 12px;
  height: 12px;
  transform: translateY(3px);
}
.ablum_tag_list .album_tag:nth-child(1) {
  border: 1px solid #a3a3ac;
  border-radius: 3px;
  margin-left: 10px;
}
.album_item .pic {
  width: 40px;
  height: 40px;
  display: block;
  border-radius: 3px;
}
.search_queryresult .query_item {
  width: 100%;
  height: 40px;
  font-size: 16px;
  line-height: 40px;
  color: #40404c;
  border-top: 1px solid #e1e1e1;
  border-bottom: 1px solid #e1e1e1;
}
.search_hotword {
  width: 100%;
  transform: translateX(-20px);
}
.search_bar .input {
  width: 250px;
  height: 30px;
  line-height: 30px;
  color: #ababab;
  background-color: #eff1f4;
  font-size: 16px;
  border: none;
  outline: none;
}
.search_bar {
  width: 300px;
  height: 30px;
  line-height: 30px;
  border-radius: 15px;
  background-color: #eff1f4;
  color: #ababab;
  font-size: 12px;
  display: flex;
  align-items: center;
  margin-right: 5px;
}
.search_bar .img_wrap {
  width: 30px;
  height: 30px;
  display: flex;
  place-items: center;
  transform: translateX(7px);
}
.search_bar .delete {
  justify-self: end;
  transform: translateX(-7px);
}
.search_bar .delete img {
  display: block;
  width: 14px;
  height: 14px;
  display: flex;
  place-items: center;
}
.img_wrap img {
  width: 14px;
  height: 14px;
  display: block;
}
.search_header .cancel {
  height: 30px;
  line-height: 30px;
  font-size: 16px;
  text-align: center;
  border: none;
  background-color: #fff;
  padding: 0;
}
.menu_tabs ::v-deep .van-tab--active {
  color: #ff0b0b;
  font-size: 18px;
}
.hotword_list .hotword_item {
  width: 100%;
  height: 36px;
  line-height: 36px;
  font-size: 16px;
  border: 1px solid #fcfcfc;
  display: flex;
  align-items: center;
  position: relative;
}
.hotword_item .num {
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 20px;
  color: #dabda6;
  margin-left: 10px;
}
.hotword_item:nth-child(1) .num {
  color: #ff0b0b;
}
.hotword_item:nth-child(2) .num {
  color: #f86442;
}
.hotword_item:nth-child(3) .num {
  color: #f8ac4f;
}
.hotword_item .info {
  font-size: 16px;
}
.hotword_item .arrow {
  width: 16px;
  height: 16px;
  display: block;
  position: absolute;
  right: 0px;
}
</style>
